<template>
    <div class="register">
        <MyHead title="注册" :isrigth="false"></MyHead>


        <div class="PromptText">欢迎注册账号</div>

        <van-form ref="fromLogin">
            <van-cell-group inset>

                <van-field v-model="params.user" label="用户名" name="user" placeholder="请输入用户名" :rules="userrules" />

                <van-field v-model="params.tel" type="number" name="tel" label="手机号" placeholder="请输入手机号"
                    :rules="telrules" />

                <van-field v-model="params.sms" type="number" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <van-cell-group inset>
                <template class="pwdtemplate">
                    <van-field v-model="params.pwd" :type="iseys1 ? 'text' : 'password'" label="登录密码" :rules="pwdrules"
                        @update:model-value="conpwdhandler" />
                    <div class="eyes" @click="ispwdeyes1">
                        <span v-show="iseys1"><i class="iconfont icon-yanjing"></i></span>
                        <span v-show="!iseys1"><i class="iconfont icon-bukejian"></i></span>
                    </div>
                </template>
                <template class="pwdtemplate">
                    <van-field v-model="params.conpwd" :type="iseys2 ? 'text' : 'password'" label="确认密码"
                        :rules="conpwdrules" />
                    <div class="eyes" @click="ispwdeyes2">
                        <span v-show="iseys2"><i class="iconfont icon-yanjing"></i></span>
                        <span v-show="!iseys2"><i class="iconfont icon-bukejian"></i></span>
                    </div>
                </template>
                <div v-show="PromptText" class="PwdPromptText">{{PwdPromptText}}</div>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="SubmitRegistration">
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script setup>

import { ref, reactive, watch, onMounted } from 'vue';
import {registerAPI} from  "@/api/loginapi"
import { showSuccessToast, showFailToast } from 'vant';
import {useCommon} from "@/hooks/Common"
let {gotoreplacewhere} =useCommon();
let iseys1 = ref(false)
let iseys2 = ref(false)
let PromptText = ref(false)
let PwdPromptText=ref()
let params = reactive({
    user: '',
    tel: '',
    // sms: '',
    pwd: '',
    conpwd: '',
})

let fromLogin = ref({})

//密码显隐
const ispwdeyes1 = () => {
    iseys1.value = !iseys1.value;
}
const ispwdeyes2 = () => {
    iseys2.value = !iseys2.value;
}


//验证用户名
let userrules = [
    { required: true, message: '请输入用户名' },
    { pattern: /[\w]/, message: '用户名由数字字母下划线组成' },
    { pattern: /[\w]{6,20}/, message: '用户名的长度应为6-20位' },
    { pattern: /[^0-9_][\w]{5,19}/, message: '不能以数字或下划线开头' },
]

//手机号
let telrules = [{ required: true, message: '请输入手机号' },
{ pattern: /^[1][3-9][0-9]{9}/, message: '请输入正确的手机号' },
]




//确认密码验证函数
let conpwdhandler = () => {
    if(params.conpwd==''){
        PromptText.value=true;
        PwdPromptText.value='请输入密码'

    }else if (!(params.conpwd == params.pwd)) {
        console.log(33333);
        PromptText.value = true;
        PwdPromptText.value='两次密码不一致'
    } else {
        // fromLogin.value.validate()
        PromptText.value = false;
        return false
    }
}


//密码验证
let pwdrules = [
    { required: true, message: "请输入密码" },
    { pattern: /[\w]{6,20}/, message: '密码应为6-20位的数字字母下划线组成' },
    { validator: conpwdhandler }
]

//确实密码验证
let conpwdrules = [

    { validator: conpwdhandler, }
]


//注册接口调用

let SubmitRegistration =async ()=>{
    let arr=Object.values(params);
    let flag=arr.every(item=>item!='');
    if(flag){
        try {
            let res=await registerAPI({
                username:params.user,
                phone:params.tel,
                password:params.pwd
            });

            if(res.data.code==200){
                showSuccessToast('注册成功');
                    gotoreplacewhere('/login')
            }
        } catch (err) {
            showFailToast(err.message)
        }
    }else{
        showFailToast('请填写正确的信息')
    }
}







onMounted(() => {
    console.log(fromLogin.value);
});

</script>

<style lang="scss" scoped>
.PromptText {
    font-size: .3rem;
    margin: .3rem 0 .1rem .3rem;
    color: #777;
}

;

::v-deep.register {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.2rem;
    // background: #ccc;

    .van-cell-group {
        margin: .5rem;
    }
}

.pwdtemplate {
    display: flex;
}

.pwdtemplate .eyes {
    margin-top: .3rem;
}

.PwdPromptText {
    // position: absolute;
    font-size: 0.14rem;
    color: #f00;
    margin-left: 2rem;
    margin-top: 0.04rem;
    z-index: 10000;

}
</style>
